<template>
  <div>
    用户信息
    <a-select
      ref="select"
      style="width: 120px"
      @onSearch="search"
      @change="handleChange"
      :placeholder="userobj.name"
    >
      <!-- <a-select-option autofocus value="jack">{{userobj.name}}</a-select-option> -->
      <a-select-option value="userins"> 个人中心</a-select-option>
      <a-select-option value="edituser">用户管理</a-select-option>
      <a-select-option value="editsss">系统设置</a-select-option>
      <a-select-option value="removes">退出登录</a-select-option>
    </a-select>
  </div>
</template>

<script setup lang="ts">
import type { SelectProps } from "ant-design-vue";
import { storeToRefs } from "pinia";
import { useLogin } from "../store/login";
import {useRouter} from "vue-router"
const logins = useLogin();
const router = useRouter()
let { userobj } = storeToRefs(logins);

const handleChange = (value: any) => {
  // console.log(value,"option")
  if (value === "userins") {
    console.log("个人中心");
    router.push("/userinfos")
  } else if (value === "edituser") {
    console.log("用户管理");
    router.push("/users")
  } else if (value === "editsss") {
    console.log("系统设置");
    router.push("/edit")
  } else if (value === "removes") {
    console.log("退出登录");
    localStorage.clear()
    location.reload()
  }
};

const search = (value:any) =>{
    console.log(value,"search")
}
</script>

<style lang="scss">
.ant-select-selection-placeholder{
    color: #000;
}
</style>
